<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>课程表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        /* 去除表格内的线 */
        .table>tbody>tr>td {
            border: 0px;
        }
        /* 居中表头 */
        .bootstrap-table .table thead>tr>th {
            text-align: center;
        }
        /* 表头颜色 */
        .table thead {
            background: #eee;
        }
    </style>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>
<!-- 整个显示界面 -->
<div class="container-fluid" style="text-align: center;">
    <!-- 切换按钮 -->
    <br>
    <div style="text-align: left">
        页面切换：
        <button type="button" class="btn btn-primary" onclick="window.location.href = '/student/slist'">学生表</button>
        <button type="button" class="btn btn-primary" onclick="window.location.href = '/teacher/tlist'">教师表</button>
        <button type="button" class="btn btn-primary" onclick="window.location.href = 'http://localhost:8080/login/user'">登录页面</button>
    </div>
    <!-- 标题 -->
    <hr style="margin-bottom: -3px">
    <h1 style="font-family: Microsoft Yahei">课<nobr>&nbsp&nbsp</nobr>程<nobr>&nbsp&nbsp</nobr>表</h1>
    <hr style="margin-bottom: -3px">
    <!-- 按钮 -->
    <table style="margin: 20px auto; width: 100%">
        <tr style="margin-bottom: 10px">
            <td width="90px">
                <!-- 查询选项 -->
                <select class="form-control" id="option" name="option">
                    <option value="cname">课程名</option>
                    <option value="cno">课程号</option>
                </select>
            </td>
            <td style="text-align:left;">
                <!-- 查询按钮 -->
                <form class="form-inline">
                    <div class="form-group">
                        <label for="searchName"></label>
                        <input type="text" class="form-control" id="searchName" name="searchName" placeholder="请输入查询内容">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="searchCourseName();">查询</button>
                </form>
            </td>
            <td style="text-align:right;">
                <!-- 新增按钮 -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">新增课程</button>
            </td>
        </tr>
    </table>
    <!-- 课程表 -->
    <table id="couTable" class="table table-striped" style="margin: 0 auto; padding: 20px;"></table>
</div>
<!-- 弹窗 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">课程信息</h4>
            </div>
            <div class="modal-body">
                <form id="formCourse">

                    <input hidden="hidden" id="cid" name="cid"/>
                    <div class="form-group">
                        <label for="cname">课程名</label>
                        <input type="text" class="form-control" id="cname" name="cname" placeholder="课程名">
                    </div>
                    <div class="form-group">
                        <label for="cno">课程号</label>
                        <input type="text" class="form-control" id="cno" name="cno" placeholder="课程号">
                    </div>
                    <div class="form-group">
                        <label for="ctime">课时</label>
                        <input type="text" class="form-control" id="ctime" name="ctime" placeholder="课时">
                    </div>
                    <div class="form-group">
                        <label for="tno">教师号</label>
                        <input type="text" class="form-control" id="tno" name="tno" placeholder="教师号">
                    </div>
                    <div class="form-group">
                        <label for="address">地点</label>
                        <input type="text" class="form-control" id="address" name="address" placeholder="地点">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveCourse();">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/pagejs/courselist.js"></script>

</body>
</html>